<template>
  <div class="row5">
    <div class="box">
      <!-- 这个盒子是用来放下拉选择框的 -->
      <div class="col_1 echarts" id="row5_col_1"></div>
    </div>
    <div class="box">
      <div class="col_2 echarts" id="row5_col_2"></div>
    </div>
    <div class="box">
      <div class="col_3 echarts" id="row5_col_3"></div>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
export default {
  // 当前vue文件的名字
  name: "row5",
  // 数据
  data() {
    return {};
  },
  // 页面加载就执行
  mounted() {
    this.getCol5_1(
      document.querySelector("#row5_col_1"),
      "5.1诚信企业申报流程状态统计-柱状图(家)"
    );
    this.getCol5_2(
      document.querySelector("#row5_col_2"),
      "5.2诚信企业发布-市级柱状图(家)"
    );
    this.getCol5_3(
      document.querySelector("#row5_col_3"),
      "5.3诚信企业评定状态分析-柱状图(家)"
    );
  },
  // 监听器 监听数据变化
  watch: {},
  // 方法
  methods: {
    // 5.1
    async getCol5_1(domName, title) {
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.lcztjSelect.do"
      );
      // console.log('5.1', data);
      let str = data.substring(5);
      let cxqySb = eval("(" + str + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          borderRadius: 5,
          borderColor: "#6baab2",
          borderWidth: 1,
        },
        grid: {
          left: "0%",
          top: "18%",
          right: "3%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: {
          // data: ['注册未自评', '自评未上报', '待评估', '公示结束', '有效期自评'],
          data: cxqySb.map((item) => {
            return item.name;
          }),
          triggerEvent: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: -20,
            interval: 0,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          // name: "数量",
          triggerEvent: true,
          nameTextStyle: {
            color: "#ffff",
            fontSize: 10,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "5%",
            start: 0,
            end: 50,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        color: ["#7242d0"],
        series: [
          {
            name: "企业数",
            barMinHeight: 10,
            type: "pictorialBar",
            barCategoryGap: "60%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontSize: 15,
                },
              },
            },
            // data: [100, 150, 200, 182, 160, 130],
            data: cxqySb.map((item) => {
              return item.value;
            }),
            z: 10,
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 5.2
    async getCol5_2(domName, title) {
      const { data: res } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.sspdSelect.do"
      );
      let ctiyCxpd = eval("(" + res + ")");
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#ffffff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        // 工具箱
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        // 提示框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 图例
        // legend: {},
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisTick: {
            show: false,
            // lineStyle: {
            //   color: '#fff',
            // }
          },
        },
        yAxis: {
          // y轴逆向显示
          inverse: true,
          axisTick: {
            show: false,
          },
          type: "category",
          // data: [
          //   '邯郸',
          //   '沧州',
          //   '石家庄',
          //   '唐山',
          //   '保定',
          //   '衡水',
          //   '邢台',
          //   '廊坊',
          //   '张家口',
          //   '承德',
          //   '雄安新区',
          //   '秦皇岛',
          //   '辛集',
          //   '定州'
          // ],
          data: ctiyCxpd.city,
          axisLabel: {
            color: "#fff",
            interval: 0,
            // rotate: -10
          },
        },
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#1bbfac", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#72d07d", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        series: [
          {
            name: "评定企业数",
            type: "bar",
            // data: [
            //   2954, 1864, 1613, 1316, 1040, 887, 847, 776, 535, 532, 473, 157, 117,
            //   101
            // ]
            data: ctiyCxpd.num,
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 5.3
    async getCol5_3(domName, title) {
      var colorArray = [
        {
          top: "#ffa800", //黄
          bottom: "rgba(11,42,84,.3)",
        },
        {
          top: "#1ace4a", //绿
          bottom: "rgba(11,42,84, 0.3)",
        },
        {
          top: "#4bf3ff", //蓝
          bottom: "rgba(11,42,84,.3)",
        },
        {
          top: "#4f9aff", //深蓝
          bottom: "rgba(11,42,84,.3)",
        },
        {
          top: "#b250ff", //粉
          bottom: "rgba(11,42,84,.3)",
        },
      ];
      const { data } = await this.$http.get(
        "http://172.16.1.170:8080/cxdsj/dsjAction.pdztSelect.do"
      );
      // console.log("5.3", data);
      let str = data.substring(5);
      let cxqyPd = eval("(" + str + ")");
      // console.log("5.3", cxqyPd);
      const myChart = echarts.init(domName);
      var option = {
        title: {
          text: title,
          textStyle: {
            color: "#8fc4ff",
            fontsize: "20px",
            fontweight: "bolder",
            fontStyle: "normal",
          },
          top: "3%",
          left: "center",
        },
        // 工具箱
        toolbox: {
          feature: {
            // saveAsImage: { show: true }, // 导出图片
            myFull: {
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              onclick: () => {
                // 全屏查看
                if (domName.requestFullScreen) {
                  // HTML W3C 提议
                  domName.requestFullScreen();
                } else if (domName.msRequestFullscreen) {
                  // IE11
                  domName.msRequestFullScreen();
                } else if (domName.webkitRequestFullScreen) {
                  // Webkit
                  domName.webkitRequestFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  // Firefox
                  domName.mozRequestFullScreen();
                }
                // 退出全屏
                if (domName.requestFullScreen) {
                  document.exitFullscreen();
                } else if (domName.msRequestFullScreen) {
                  document.msExitFullscreen();
                } else if (domName.webkitRequestFullScreen) {
                  document.webkitCancelFullScreen();
                } else if (domName.mozRequestFullScreen) {
                  document.mozCancelFullScreen();
                }
              },
            },
          },
        },
        tooltip: {
          show: true,
          formatter: "{b}:{c}",
        },
        grid: {
          left: "0%",
          top: "10%",
          // right: '1%',
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
          position: "top",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            splitLine: {
              //网格线
              show: false,
            },
            inverse: "true", //排序
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            // data: ['当前注册企业', '发布企业', '有效期内企业', '有效期过期企业', '注销或关停企业']
            data: cxqyPd.map((item) => {
              return item.name;
            }),
          },
        ],
        series: [
          {
            // name: '能耗值',
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{c}",
                textStyle: {
                  color: "white", //color of value
                },
              },
            },
            itemStyle: {
              normal: {
                show: true,
                color: function (params) {
                  let num = colorArray.length;
                  return {
                    type: "linear",
                    colorStops: [
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                      {
                        offset: 0,
                        color: colorArray[params.dataIndex % num].bottom,
                      },
                      {
                        offset: 1,
                        color: colorArray[params.dataIndex % num].top,
                      },
                    ],
                    //globalCoord: false
                  };
                },
                barBorderRadius: 70,
                borderWidth: 0,
                borderColor: "#333",
              },
            },
            barGap: "0%",
            barCategoryGap: "50%",
            // data: [120, 200, 150, 80, 70],
            data: cxqyPd.map((item) => {
              return item.num;
            }),
          },
        ],
      };
      // 3.把配置项给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.row5 {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>